<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>城市级联</title>
    <link rel="stylesheet" href="./city.css" />
  </head>
  <body>
    <div class="addr">
      <fieldset>
        <legend>下拉选择框是是实现省市区/县三级联动</legend>
        <form action="#">
          <div>
            <label>您选择的是：</label>
            <input
              type="text"
              readonly
              class="selected-addr"
              placeholder="请选择您要去往的城市"
            />
          </div>
          <!-- 省份/自治区 -->
          <select id="province">
            <option disabled selected>选择省份</option>
          </select>
          <!-- 市/区 -->
          <select id="city">
            <option disabled selected>选择市</option>
          </select>
          <!-- 县城 -->
          <select id="area">
            <option disabled selected>选择区/县</option>
          </select>
          <input type="button" class="btn-getaddr" value="确定" disabled />
        </form>
      </fieldset>
    </div>
  </body>
  <script src="./select_city.js"></script>
  <script src="./city.js"></script>
</html>
